import React from 'react';
import { Upload, Icon, Modal,Button,message } from 'antd';
import axios from 'axios';
const  imgPath ='https://app-cdn.starcharge.com/';

class PicturesWall extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      previewVisible: false,
      previewImage: '',
      fileList: [],
    };
  }


  componentWillReceiveProps(props){
      let imgArr = props.imgUrl;
      var jsonArr = new Array();
      if(imgArr != undefined && imgArr != null && imgArr !=''){
          var jsonObj = {};
          jsonObj['uid'] =0;
          jsonObj['name'] =imgArr;
          jsonObj['status'] ='done';
          jsonObj['url'] =imgPath+imgArr+'?x-oss-process=image/resize,w_500';
          jsonObj['thumbUrl']=imgPath+imgArr+'?x-oss-process=image/resize,w_500';
          jsonArr.push(jsonObj);
        this.setState({
          fileList:jsonArr
        })
      }
  }
  

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({ fileList }) => {
    this.setState({fileList })
    if(fileList != undefined && fileList != null && fileList.length >0){
      let fileArr = new Array();
      fileList.forEach(function(v,k) { 
        if(v.status == 'error'){
          message.success('上传失败');
        }else{
          let strMap = new Map();
          if(v.response  && v.response.code ==200){
            fileArr = v.response.data.fileIdList;
          }
        }
      });
      if(fileArr.length >0){
        this.props.getFileIdList(fileArr);
      }
    }
  }

  render() {
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          action={axios.defaults.baseURL+'/uploadFile.do?resultFlag=2'}
          listType="picture-card"
          fileList={this.state.fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}>
          {this.state.fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%'}} src={this.state.previewImage} />
        </Modal>
      </div>
    );
  }
}

export  default PicturesWall;